<template>
  <div class="office-box">
    <el-alert
      title="文件预览不支持doc、xls、ppt,只支持图片、docx、xlsx、pptx格式"
      type="warning"
      center
      show-icon
      :closable="false"
    />
    <div class="office">
      <vue-office-docx v-if="type === 'docx'" :src="url" @rendered="renderedHandler" style="height: 100vh" />
      <vue-office-excel
        v-if="type === 'xlsx'"
        :src="url"
        @rendered="renderedHandler"
        @error="errorHandler"
        style="height: 100vh"
      />
      <vue-office-pdf v-if="type === 'pdf'" :src="url" @rendered="renderedHandler" @error="errorHandler" style="height: 100vh" />
      <vue-office-pptx
        v-if="type === 'pptx'"
        :src="url"
        @rendered="renderedHandler"
        @error="errorHandler"
        style="height: 100vh"
      />
      <ImageView v-if="type === 'image'" :src="url" class="image-view" />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'ProOffice'
});

import { ref, computed } from 'vue';
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';
import VueOfficeExcel from '@vue-office/excel';
import '@vue-office/excel/lib/index.css';
import VueOfficePdf from '@vue-office/pdf';
import VueOfficePptx from '@vue-office/pptx';
import { ElAlert } from 'element-plus';
import ImageView from './image.vue';
const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  }
});

const url = computed(() => props.src);
const type = computed(() => props.type);

const renderedHandler = () => {
  // console.log('渲染完成');
};

const errorHandler = () => {
  console.log('渲染失败');
};
</script>

<style lang="scss" scoped>
.office {
  width: 100%;
  height: 80vh;
}
.img-view {
  width: 100%;
  height: 100%;
}
</style>
